<template>
    <section>
        <div class="block">
            <b-icon pack="fas" icon="user" size="is-small"> </b-icon>
            <b-icon pack="fas" icon="home" size="is-small"> </b-icon>
            <b-icon pack="fas" icon="tachometer-alt" size="is-small"> </b-icon>
        </div>

        <div class="block">
            <b-icon pack="fas" icon="user"> </b-icon>
            <b-icon pack="fas" icon="home"> </b-icon>
            <b-icon pack="fas" icon="tachometer-alt"> </b-icon>
        </div>

        <div class="block">
            <b-icon pack="fas" icon="user" size="is-medium"> </b-icon>
            <b-icon pack="fas" icon="home" size="is-medium"> </b-icon>
            <b-icon pack="fas" icon="tachometer-alt" size="is-medium"> </b-icon>
        </div>

        <div class="block">
            <b-icon pack="fas" icon="user" size="is-large" type="is-success">
            </b-icon>
            <b-icon pack="fas" icon="home" size="is-large" type="is-info">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-large"
                type="is-primary"
            >
            </b-icon>
        </div>

        <div class="buttons">
            <b-button
                label="Finish"
                type="is-dark"
                icon-pack="fas"
                icon-left="check"
            />
            <b-button
                label="Finish"
                type="is-warning"
                icon-pack="fas"
                icon-left="check"
            />
            <b-button type="is-warning">
                <b-icon pack="fas" icon="sync-alt" custom-class="fa-spin">
                </b-icon>
                <span>Refresh</span>
            </b-button>
        </div>
    </section>
</template>

<script setup lang="ts">
import { BButton, BIcon } from "buefy";
</script>
